<template>
  <div class="cleave">
    <el-form :model="formData" :rules="rules" label-width="200px">
      <el-form-item label="手机号码：" prop="phone">
        <el-input class="w300" v-model="formData.phone" placeholder="xxx xxxx xxxx"
                  v-cleave="{ phone: true, phoneRegionCode: 'cn', delimiter: '-' }"></el-input>
      </el-form-item>
      <el-form-item label="日期：">
        <el-input class="w300" v-model="formData.date" placeholder="YYYY-MM-DD"
                  v-cleave="{ date: true, delimiter: '-', datePattern: ['Y', 'm', 'd'] }"></el-input>
      </el-form-item>
      <el-form-item label="时间：">
        <el-input class="w300" v-model="formData.time" placeholder="hh:mm:ss"
                  v-cleave="{ time: true, timePattern: ['h', 'm', 's'] }"></el-input>
      </el-form-item>
      <el-form-item label="自定义具体时间：">
        <el-input class="w300" v-model="formData.dateTime" placeholder="YYYY-MM-DD hh:mm:ss" v-cleave="{
          delimiters: ['-', '-', ' ', ':', ':',],
          blocks: [4, 2, 2, 2, 2, 2],
          numericOnly: true,
        }"></el-input>
      </el-form-item>
      <el-form-item label="数字格式选择-thousand：">
        <el-input class="w300" v-model="formData.num1" placeholder="thousand"
                  v-cleave="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"></el-input>
      </el-form-item>
      <el-form-item label="数字格式选择-lakh：">
        <el-input class="w300" v-model="formData.num2" placeholder="lakh"
                  v-cleave="{ numeral: true, numeralThousandsGroupStyle: 'lakh' }"></el-input>
      </el-form-item>
      <el-form-item label="数字格式选择-wan：">
        <el-input class="w300" v-model="formData.num3" placeholder="wan"
                  v-cleave="{ numeral: true, numeralThousandsGroupStyle: 'wan' }"></el-input>
      </el-form-item>
      <el-form-item label="自定义格式">
        <el-input class="w300" v-model="formData.other" placeholder="自定义格式"
                  v-cleave="{ delimiter: '·', blocks: [1, 2], uppercase: true }"></el-input>
      </el-form-item>

      <el-input class="w300" type="textarea" v-model="formData.adw" placeholder="YYYY-MM-DD hh:mm:ss"></el-input>

<!--      <el-input v-model="formData.dddd" type="number" oninput="value = value.replaceAll(value,(target,index,origin)=>{-->
      <!--            console.log('ssss',origin,target)-->
      <!--            return value-->
      <!--            if(!origin.includes('.')||origin.indexOf('.')===origin.length){-->
      <!--              return target-->
      <!--            }-->
      <!--              return  (origin.indexOf('.')+2 < origin.length)  ? '' : target-->
      <!--            })"></el-input>-->
      <!-- /^\d+(\.\d{1,2})?$/g -->

      <money-input v-model="money"></money-input>
      <div>{{money}}</div>
    </el-form>
  </div>
</template>

<script>
import MoneyInput from "@/components/moneyInput/index.vue";

export default {
  name: "cleave",
  components: {MoneyInput},
  data() {
    return {
      formData: {
        str: "",
        phone: '',
        date: '',
        time: '',
        dateTime: '',
        dateTime2: '',
        num1: '',
        num2: '',
        num3: '',
        other: '',
        dddd: ''
      },
      rules: {
        phone: [{required: true}]
      },
      money: 'w12.6000d'
    };
  },
  methods: {
    change(e) {
      console.log(e.target)
    },
  }
}

</script>

<style scoped>
.w300 {
  width: 300px;
}

.edit {
  width: 300px;
  height: 300px;
  background: #f1f1f1;
  padding: 10px;
  font-size: 12px;
  line-height: 14px;
}
</style>
